<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>复选框全选反选</title>
    <!-- 引入jQuery -->
    <script src="H:\jQuery\js\jquery-3.7.1.min.js"></script>
</head>
<body>
    <!-- 全选复选框 -->
    <label><input type="checkbox" id="checkAll"> 全选</label>
    <br>
    <!-- 选项复选框 -->
    <label><input type="checkbox" class="option"> 选项1</label>
    <label><input type="checkbox" class="option"> 选项2</label>
    <label><input type="checkbox" class="option"> 选项3</label>
    <br>
    <!-- 反选按钮 -->
    <button id="reverseBtn">反选</button>

    <script>
        $(function() {
            // 1. 点击“全选”，控制所有选项
            $("#checkAll").click(function() {
                // 把全选框的状态同步给所有选项框
                $(".option").prop("checked", $(this).prop("checked"));
            });

            // 2. 选项框变化时，同步“全选”的状态
            $(".option").click(function() {
                // 统计已选中的选项数量
                let checkedCount = $(".option:checked").length;
                // 选项总数
                let totalCount = $(".option").length;
                // 所有选项都选中 → 全选框选中；否则取消
                $("#checkAll").prop("checked", checkedCount === totalCount);
            });

            // 3. 点击反选按钮，切换所有选项的状态
            $("#reverseBtn").click(function() {
                $(".option").each(function() {
                    // 取当前状态的相反值
                    $(this).prop("checked", !$(this).prop("checked"));
                });
                // 反选后同步“全选”的状态
                let checkedCount = $(".option:checked").length;
                let totalCount = $(".option").length;
                $("#checkAll").prop("checked", checkedCount === totalCount);
            });
        });
    </script>
</body>
</html>